<template>
    <template v-for="item in menuList" :key="item.id">
        <el-sub-menu v-if="hasChildren(item)" :index="item.path">
            <template #title>
                <span>{{ item.authName }}</span>
            </template>
            <template v-for="child in item.children" :key="child.id">
                <el-sub-menu 
                    v-if="hasChildren(child)" 
                    :index="child.path"
                >
                    <template #title>
                        <span>{{ child.authName }}</span>
                    </template>
                    <Menu :menu-list="child.children" />
                </el-sub-menu>
                <el-menu-item 
                    v-else 
                    :index="child.path"
                >
                    {{ child.authName }}
                </el-menu-item>
            </template>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path">
            {{ item.authName }}
        </el-menu-item>
    </template>
</template>

<script lang="ts" setup>
import { MenuItemOld } from '../../apis/menu/menu';
defineProps<{
    menuList: MenuItemOld[]
}>();
const hasChildren = (item: MenuItemOld) => {
    return item.children && item.children.length > 0;
};
</script>

<style scoped lang="scss"></style>